<template>
  <div>
    <qt-input
      type="text"
      :label="label"
      :value="value"
      :readonly="true"
      :hidden="true"
      :required="required"
      :field-name="fieldName"
      :placeholder="placeholder"
    />
    <qt-input
      v-model="currentDate"
      type="text"
      :label="label"
      :readonly="true"
      :required="required"
      :field-name="fieldName"
      :placeholder="placeholder"
      @click="handleClick"
    />
    <van-popup
      v-model="showPicker"
      position="bottom"
      :close-on-click-overlay="false"
      @click-overlay="closePick"
    >
      <van-picker
        show-toolbar
        :value-key="showKey"
        :columns="sourceOption"
        @cancel="closePick"
        @confirm="onConfirmSelect"
      />
    </van-popup>
  </div>
</template>

<script>
import QtInput from '../input';

export default {
  name: 'qtSelect',

  components: {
    QtInput,
  },

  props: {
    label: String,

    rightIcon: String,

    value: [String, Number],

    placeholder: String,

    type: {
      type: String,
      default: 'text',
    },

    showKey: {
      type: String,
      default: '',
    },

    valueKey: {
      type: String,
      default: '',
    },

    required: {
      type: Boolean,
      default: true,
    },

    readonly: {
      type: Boolean,
      default: false,
    },

    disabled: {
      type: Boolean,
      default: false,
    },

    inputAlign: {
      type: String,
      default: 'right',
    },

    fieldName: {
      type: String,
      required: true,
    },

    options: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  data() {
    return {
      showPicker: false,
      currentDate: '',
    };
  },

  computed: {
    dictionary() {
      return this.$store.state.dataDictionary;
    },
    // 先从字典获取下拉框选项，获取不到，则将传入的options赋值给下拉框
    sourceOption() {
      let options = [];
      if (this.options.length) {
        options = this.options;
      } else if (this.fieldName in this.dictionary) {
        options = this.dictionary[this.fieldName];
      }
      return options;
    },
  },

  watch: {
    value(newVal) {
      if (newVal) {
        const currentItem = this.sourceOption.filter((item) => item[this.valueKey] === newVal)[0];
        this.currentDate = currentItem[this.showKey];
      } else if (newVal === '') {
        this.currentDate = '';
      }
    },
  },

  methods: {
    handleClick() {
      if (!this.disabled) {
        this.showPicker = true;
      }
    },

    closePick() {
      if (this.required && !this.currentDate) {
        return this.$toast.fail(`${this.label}不能为空！`);
      }
      this.showPicker = false;
    },

    onConfirmSelect(value) {
      if (this.required && !value[this.valueKey]) {
        return this.$toast.fail(`${this.label}不能为空！`);
      }
      this.currentDate = value[this.showKey];
      this.$emit('input', value[this.valueKey], this.fieldName);
      this.$emit('change', value[this.valueKey], this.fieldName);
      this.closePick();
    },
  },
};
</script>
